<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>中国高等教育学会教育信息化分会 2017年校园卡工作组年会 华中师范大学会场直播 {{.WEBSITE}}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ����3��meta��ǩ*����*������ǰ�棬�κ��������ݶ�*����*������� -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/static/favicon.ico">

    <script type="text/javascript" src="/static/public/jquery-2.0.0.min.js"></script>
    <!-- Bootstrap core CSS 修改了bootstrap.min.css源文件里的pre-scrollable(垂直滚动条)部分，改高度340为800px-->

    <link href="/static/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
    <script type="text/javascript" src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <!--bootstrap treeview-->
    <link rel="stylesheet" href="/static/bootstrap-treeview/dist/bootstrap-treeview.min.css" />
    <script src="/static/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
    <!--bootstrap treeview end-->
    <link rel="stylesheet" href="/static/aliyun/index-min.css" />
    <script src="/static/aliyun/prism-min.js"></script>
    <style type="text/css">

    </style>
</head>

<body style="background-color: #fcf8e3;">
    <div style="height: 1px;"></div>
    <div style="width:100%;">
        <img width="100%" src="/static/img/ykthy/logo1.png" />
    </div>
    <!--div class="container panel-success well">
        <div class="row clearfix vertical-middle-sm" style="background-image:'/static/img/ykthy/logo1.png'">
            <div style="margin-left:auto;margin-right:auto;width:auto;display: inline;">
                <img width="60px" height="60px" src="/static/img/ccnu1.png" />
            </div>
            <div style="display: inline;">
                <span style="font-size: 21px;">中国高等教育学会教育信息化分会 2017年校园卡工作组年会 直播测试</span>
            </div>
        </div>
    </div-->

    <div class="container">
        <div class="row clearfix">
            <div class="col-md-3 column">
                <div class="panel panel-warning">
                    <div class="panel-heading" style="color:black;">
                        <span class="glyphicon glyphicon-sound-dolby" style="text-shadow: black 5px 3px 3px;" aria-hidden="true"> 
                            <strong>手机QQ或微信扫码播放</strong>
                        </span>
                    </div>
                    <div class="panel-body">
                        <img id='imgEwm' src="/api/v1/qrcode?url=http://l.kjdll.com/live/ccnu.m3u8" alt="微信扫码播放" />
                        <div id="treeview" style="text-shadow: black 5px 3px 3px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-9 column">
                <div class="panel panel-warning">
                    <div class="panel-body">
                        <div style="height: 5px;"></div>
                        <div class="div_center">
                            <!--
                    width="900px" height="100%" 
                    controls 表示自动添加播放控件。
                    加上 preload="auto" 可以让页面加载完成后立即开始加载视频，如果设置为 preload="meta" 则只加载视频元数据。 
                            -->
                            <div id="J_prismPlayer" class="prism-player"></div>
                        </div>
                        <!--div class="div_center"-->
                    </div>
                    <!--div class="panel-body"-->
                </div>
                <!--div class="panel panel-primary"-->
            </div>
        </div>
    </div>

    <div class="1container" style="background-color:rgb(255,204,77);">
        <!--hr style="color: beige;" style="padding-top: 0px;" /-->
        <div class="row clearfix">
            <div class="col-md-12 column">
                <p class="text-center">

                </p>
                <p class="text-center">
                    <strong>华中师范大学信息化办公室</strong>
                </p>
                <p class="text-center">
                    <strong>技术支持：熊义 13517246847</strong>
                </p>
                <p class="text-center">
                    <strong>当前观看直播人数：</strong><strong id="TotalUserNumber"></strong>
                </p>
            </div>
            <hr style="color: beige;" />
        </div>
    </div>

    <script>
        // 阿里云播放吕 初始化播放器
        var $player
        var clickDom = document.getElementById("J_clickToPlay");
        /*clickDom.addEventListener("click", function(e) {
            // 调用播放器的play方法
            $player.play();
        });*/
        // 监听播放器的pause事件
        /*
        $player.on("pause", function() {
            alert("播放器暂停啦！");
        });
        //直播流中断时触发,m3u8/flv/rtmp在重试5次未成功后触发，提示上层流中断或需要重新加载视频(PS：m3u8一直自动重试，不需要上层添加重试)
        //已测试有效！！！
        $player.on("liveStreamStop", function() {
            console.log("m3u8/flv/rtmp在重试5次未成功后触发！，切换直播源！！");
            loadByUrl("rtmp://l.kjdll.com/live/ccnu"); //直接播放视频url
            //loadByUrl("http://l.kjdll.com/live/ccnu.m3u8"); //直接播放视频url
            //player.play();
        });
        //m3u8Retry，m3u8直播流中断后重试事件，每次断流只触发一次
        $player.on("m3u8Retry", function() {
            alert("m3u8直播流中断后重试事件，每次断流只触发一次！");
        });
        //当前视频播放完毕时触发
        $player.on("ended", function() {
            alert("当前视频播放完毕时触发！");
        });
        */
        $(function() {
            startTime(); //开启定时器
            getRtmpSrc(); //取得地址并播放
        });
    </script>

    <script>
        //定时器
        function startTime() {
            getLiveStreamOnlineUserNum();
            setTimeout('startTime()', 30000);
        }
        //定时器的任务，取得当前看直播的人数
        function getLiveStreamOnlineUserNum() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '/api/v1/live/DescribeLiveStreamOnlineUserNum',
                data: {
                    id: "0"
                },
                success: function(res) {
                        //console.log("返回数据：" + res); //返回的是JSON数据
                        if (res.StatusCode == 200) {
                            $("#TotalUserNumber").html(res.Data);
                        }
                    } //success		
            }); //$.ajax
        };
        //取得rtmp播放地址
        function getRtmpSrc() {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: '/api/v1/live/getAliyunLiveRtmpSources',
                data: {
                    id: "0"
                },
                success: function(res) {
                    //console.log("返回数据：" + res); //返回的是JSON数据
                    //player.loadByUrl(res);
                    //player.play();
                    if (res.StatusCode == 200) {
                        $player = new prismplayer({
                            id: "J_prismPlayer", // 容器id
                            source: res.Data, //"rtmp://l.kjdll.com/live/ccnu", //rtmp://c.kjdll.com/live/test", // 视频地址
                            autoplay: true, //自动播放：否
                            isLive: true, //播放内容是否为直播，直播时会禁止用户拖动进度条，并且不能点击鼠标暂停
                            width: "100%", // 播放器宽度
                            height: "470px", // 播放器高度
                            extraInfo: {
                                "fullTitle": "2017年校园卡工作组年会", //全屏时显示视频标题(目前仅flash支持)；
                                "m3u8BufferLength": "2", //播放m3u8时加载缓存ts文件长度(目前仅flash支持)，单位（秒）；
                                "liveStartTime": "2017/05/27 08:00:00", //直播开始时间，用于提示直播未开始(目前仅flash支持)；
                                "liveStopTime": "2017/05/27 16:00:00", //直播结束时间，用于提示直播结束(目前仅flash支持)；
                                "liveRetry": 0, //直播流中断是否重试；不能够用重试。因为RTMP断后再连接不能播放了！！！！！！
                            }
                        });
                    } //success	
                }
            }); //$.ajax
        }

        function getTree() {
            // Some logic to retrieve, or generate tree structure
            var treeData = [{
                text: "直播测试",
                nodes: [{
                    text: "测试频道1",
                    nodes: [{
                        text: "无直播内容"
                    }, {
                        text: "无直播内容"
                    }]
                }, {
                    text: "华师校歌 南湖秋月"
                }]
            }];
            return treeData;
        };

        //Global Defaults
        /*注释掉树形列表
        $('#treeview').treeview({
            data: getTree()
        });*/
        $(function() {
            //页面完成载入后
            //$('#imgEwm').attr("src", "/api/v1/qrcode?url=" + window.location.href); //window.location.host + window.location.pathname);
            //$('#imgEwm').attr("src", "/api/v1/qrcode?url=" + "http://c.kjdll.com:8888/hls/test.m3u8");
        });
    </script>

    <script>
        function fullscreen() {
            //全屏
            //$('.vjs-play-control').click();   //暂停继续按钮，可以用
            $('.vjs-fullscreen-control').click(); //全屏
        };

        function phonePlay() {
            //转到手机播放
            location.href = "http://c.kjdll.com:8888/hls/test.m3u8";
        };
    </script>


</body>

</html>